<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>粘性定位</title>
        <style type="text/css">
            body{ margin: 0; padding: 0; }
            .odd { background: #dedede ; }
            .even { background: rgb(255, 190, 69) ; }
            .wrapper { height: 400px ; }

            .first { height: 2000px; }

            .first>div { 
                position: sticky ;
                left: 10% ;
                top: 20px ;
                height: 100px ;
                width: 80% ;
                background: rgba(102, 147, 250, 0.5);
            }

        </style>
    </head>
    <body>

        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd first">
            <div></div>
        </div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        
    </body>
</html>